<template>
  <div class="comment" :style="{paddingTop:padding}">
    <div class="content">
      <div v-for="(item,index) in commentlist" :key="index">
        <div class="left">
          <img :src="item.userPhoto" alt="">
        </div>
        <div class="right">
          <div>
            <span>{{item.userName}}</span>
            <span>{{item.like}}</span>
            <span @click="countLike(index)">
              <yd-icon :name="item.iconName"  custom slot="icon" size="0.5rem"></yd-icon>
            </span>

          </div>
          <div @click="reply(index)">{{item.detail}}</div>
          <div>{{item.htmlTime}}</div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <div>
          <yd-icon name="output" custom slot="icon" size="0.5rem"></yd-icon>
          <span @click="comment()">写评论...</span>
          <yd-icon name="smile" custom slot="icon" size="0.5rem"></yd-icon>
        </div>
      </div>
      <div class="right">
          <span>
            <yd-icon name="comment" custom slot="icon" size="0.5rem"></yd-icon>
          </span>
        <span @click="collection()">
            <yd-icon :name="icon" custom slot="icon" :color="color" size="0.5rem"></yd-icon>
          </span>
      </div>
    </div>
    <div class="con" v-show="show">
      <textarea v-model="text" autofocus></textarea>
      <span @click="release()">发布</span>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import Vue from 'vue'

  export default {
    components: {},
    props: ['data', 'padding'],
    data() {
      return {
        page: 1,//评论页数
        size: 5,//每页多少评论
        icon: 'collection',//做收藏判断
        col: false,
        color: '',
        show: false,//评论区域
        text: null,
        htmlTime: null,  //存放评论时间
        commentlist: null,//评论列表
        datas: null,
        list: null,
      }
    },
    methods: {
      http(th) {
        if (th == undefined) {
          th = this
        }
        let con = th.$store.state.videoContent;
        let data = {
          resourceID: con.id,
          page: th.page,
          size: th.size
        };
        th.ylAjax.commentList(data).then(msg => {   //查询评论列表

          let arr = [];
          for (var i = 0; i < msg.length; i++) {
            msg[i].htmlTime = th.$options.methods.time(msg[i]);
            msg[i].iconName = 'notLike';
            msg[i].like = '0';
            msg[i].iconColor = 'black';
            arr.push(msg[i])
          }
          th.commentlist = arr
          th.$options.methods.commentlike(th)
        }).catch(msg => {
//          console.log(msg)
        })

      },
      collection() {
        alert('收藏功能暂未加入')
        if (this.col) {
          this.icon = 'collection';
          this.col = !this.col
          this.color = '';
        } else {
          this.icon = 'fivePonintedStar';
          this.color = '#ff2424';
          this.col = !this.col
        }

      },
      comment() {
        if (!this.show) {
          this.show = !this.show
        }
      },
      release() {   //提交评论
        let data = {
          userID: localStorage.userid,
          resourceID: this.$store.state.videoContent.id,
          resourceType: 'Comment',
          detail: this.text
        }
        if (this.text != null) {
          this.ylAjax.commentText(data).then(msg => {    //往服务器提交评论
            this.$options.methods.http(this)
          }).catch(msg => {
            console.log(msg)
          })
        }
        this.show = false;
        this.text = null
      },
      time(data) {    //进行时间判断
        let date = null     //字符串时间转时间戳
        date = data.createTime.substring(0, 19);
        date = date.replace(/-/g, '/');
        let timeZone = 8 * 60 * 60 * 1000;   //时区转换
        let timestamp = new Date(date).getTime() + timeZone;

        let htmlTime = null;
        let time = new Date().getTime();
        let resourceTime = timestamp;
        let n = time - resourceTime;
        let hour = 24 * 60 * 60 * 1000;  //24小时
        let minute = 60 * 60 * 1000;    //60分钟
        let second = 60 * 1000;      //60秒
        if (n > hour) {
          htmlTime = Math.round(n / hour) + '天前'
        } else if (n < hour && n > minute) {
          htmlTime = Math.round(n / minute) + '小时前'
        } else {
          htmlTime = Math.round(n / second) + '分钟前'
        }
        return htmlTime
      },
      countLike(n) {   //点赞
        let data = {
          userID: localStorage.userid,
          resourceID: this.commentlist[n].id,
          resourceType: 'Comment',
          isPositive: true
        };
        let th = this
        let like = null;
        this.ylAjax.dynamicLike(data).then(msg => {
          setTimeout(() => {
            th.$options.methods.commentlike(this, this.commentlist[n].id);
          }, 500)
        }).catch()
      },
      reply(comindex) {   //往评论回复跳转
        this.$router.push({name: 'read_reply', query: {comment: this.commentlist[comindex]}})
      },
      commentlike(th, id) {
        //查询评论点赞数
        if (th == undefined) {
          th = this
        }
        let commentList = [];
        for (var i = 0; i < th.commentlist.length; i++) {
          commentList.push(th.commentlist[i].id)
        }
        let listId = commentList.join(',');
        let like = null
        let data = {
          commentIDS: listId
        }
        th.ylAjax.commentlike(data).then(msg => {
          console.log('1', msg)
//          if (msg.data.length > 0) {
            for (var i = 0; i < msg.data.length; i++) {
              for (var n = 0; n < th.commentlist.length; n++) {
                if (msg.data[i].resourceID == th.commentlist[n].id) {
                  like = msg.data[i].countLike;
                  th.commentlist[n].iconName = 'like';
                  th.commentlist[n].like = like;
                  th.commentlist[n].iconColor = 'red';
                  console.log('qq',th.commentlist[n])
                }
              }
            }
//          }
//        console.log(th.commentlist)
        })
      },

    },
    created() {
      this.http();
    },
    activated() {
      this.list = this.data;
      this.http()

    },
    deactivated() {
      this.show = false
    }

  }

</script>
<style scoped lang="less">
  @import "~less/base";

  .comment {
    font-size: 16px;
    .content {
      padding-bottom: 1rem;
      > div {
        border-bottom: 1px solid #c6c6c6;
        padding-top: 0.2rem;
        height: 2.2rem;
        > div {
          float: left;
        }
        .left {
          width: 15%;
          > img {
            margin-left: 0.1rem;
            margin-top: 0.3rem;
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
            border: 1px solid #ffb36e;
          }
        }
        .right {
          width: 84%;
          > div {
            line-height: 0.5rem;
            width: 100%;
          }
          > div:nth-child(1) {

            > span:nth-child(1) {
              color: #2585d9;
              font-size: 14px;
            }
            > span:nth-child(2) {
              float: right;
              margin-right: 0.5rem;
            }
            > span:nth-child(3) {
              float: right;
              margin-right: 0.2rem;
              >.icon-custom-like{
                color: red;
              }
              >.icon-custom-notLike{
                color: black;
              }
            }
          }
          > div:nth-child(3) {
            font-size: 14px;
            color: #c2c2c2;
          }
        }
      }
    }
    .bottom {
      position: fixed;
      background: #fff;
      bottom: 0px;
      width: 100%;
      height: 1rem;
      border-top: 1px solid #c2c2c2;
      font-size: 16px;
      > div {
        float: left;
        width: 50%;
        height: 1rem;
      }
      > .left {
        position: relative;
        > div {
          height: 0.7rem;
          line-height: 0.7rem;
          width: 90%;
          position: absolute;
          font-size: 14px;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          background: #e7e7e7;
          border-radius: 0.7rem;
          > span {
            margin-left: 25%;
          }
          > i {
            position: absolute;
            top: 0;
          }
          > i:nth-child(1) {
            left: 0.2rem;
            color: #6a6a6a;
          }
          > i:nth-child(3) {
            right: 0.2rem;
            color: #6a6a6a;
          }
        }
      }
      > .right {
        > span {
          display: inline-block;
          height: 100%;
          width: 33%;
          line-height: 1rem;
          text-align: center;
        }
      }
    }
    .con {
      width: 100%;
      height: 1rem;
      background: #fff;
      position: fixed;
      bottom: 0;
      border-top: 1px solid #c2c2c2;
      background: #fff;
      > textarea {
        font-size: 16px;
        height: 0.7rem;
        padding: 0 0.3rem;
        border: none;
        line-height: 0.7rem;
        width: 70%;
        position: absolute;
        font-size: 14px;
        top: 50%;
        left: 0.5rem;
        transform: translateY(-50%);
        background: #e7e7e7;
        border-radius: 0.7rem;
      }
      > span {
        position: absolute;
        right: 0.2rem;
        top: 50%;
        transform: translateY(-50%);
        letter-spacing: 6px;
        color: #949494;
      }
    }

  }

  .clear {
    clear: both;
  }
</style>
